<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../babel.min.js"></script>
    <script src="../react.development.js"></script>
    <script src="../react-dom.development.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root"></div>

    <div id="root2"></div>
    <script type="text/babel">
        function toCelsius(fahrenheit) {
            return (fahrenheit - 32) * 5 / 9;
        }

        function toFahrenheit(celsius) {
            return (celsius * 9 / 5) + 32;
        }
        function tryConvert(temperature, convert) {
            const input = parseFloat(temperature);
            if (Number.isNaN(input)) {
                return '';
            }
            const output = convert(input);
            const rounded = Math.round(output * 1000) / 1000;
            return rounded.toString();
        }
        const scaleNames = {
            c: 'Celsius',
            f: 'Fahrenheit'
        };

        class TemperatureInput extends React.Component {
            constructor(props) {
                super(props);
                this.handleChange = this.handleChange.bind(this);
                this.state = { temperature: '' };
            }

            handleChange(e) {
                this.setState({ temperature: e.target.value });
            }

            render() {
                const temperature = this.state.temperature;
                const scale = this.props.scale;
                return (
                    <fieldset>
                        <legend>Enter temperature in {scaleNames[scale]}:</legend>
                        <input value={temperature}
                            onChange={this.handleChange} />
                    </fieldset>
                );
            }
        }

        class Calculator extends React.Component {
            render() {
                return (
                    <div>
                        <TemperatureInput scale="c" />
                        <TemperatureInput scale="f" />
                    </div>
                );
            }
        }

        ReactDOM.render(<Calculator />, document.getElementById("root"))

        // 状态提升后 =====================================================================================
        class TemperatureInput2 extends React.Component {
            constructor(props) {
                super(props);
                this.handleChange = this.handleChange.bind(this);
            }

            handleChange(e) {
                e.preventDefault()
                console.log('=== handleChange')
                this.props.onTemperatureChange(e.target.value)
            }

            render() {
                const temperature = this.props.temperature;
                const scale = this.props.scale;
                return (
                    <fieldset>
                        <legend>Enter temperature in {scaleNames[scale]}:</legend>
                        <input value={temperature}
                            onChange={this.handleChange} />
                    </fieldset>
                );
            }
        }

        class Calculator2 extends React.Component {

            constructor(props) {
                super(props)
                this.state = { scale: 'c', temperature: '' }
            }

            onCelsiusChange(temperature) {
                console.log('onCelsius Changed=='+ temperature)
                this.setState({ scale: 'c', temperature })
            }

            onFahrenheitChange(temperature) {
                console.log('onFahrenheit Changed'+t)
                this.setState({ scale: 'f', temperature})
            }

            render() {
                console.log("render======="+this.state.temperature)
                const temperature = this.state.temperature
                const celsius = this.state.scale == 'f' ? tryConvert(temperature, toCelsius) : temperature
                const fahrenheit = this.state.scale == 'c' ? tryConvert(temperature,toFahrenheit ) : temperature

                console.log("temperature:"+temperature+"--c:"+celsius+"==f:"+fahrenheit)
                return (
                    <div>
                        <TemperatureInput2
                            scale="c"
                            temperature={celsius}
                            onTemperatureChange={(t) => this.onCelsiusChange(t)} />
                        <TemperatureInput2
                            scale="f"
                            temperature={fahrenheit}
                            onTemperatureChange={(f) => this.onFahrenheitChange(f)} />
                    </div>
                );
            }
        }

        ReactDOM.render(<Calculator2 />, document.getElementById("root2"))

    </script>

</body>

</html>